<template>
  <div class="all">
    <div class="leftall">
      <div class="leftA">
        <Lefttop />
        <!-- 菜系leftdown -->
        <div class="leftdown">
          <div class="caixi">
            <div class="caixifenlei" @click="fn">*菜式</div>
            <!-- 小分类 -->
            <div class="caishifenlei1" ref="caishifenlei1">
              <div v-for="(el, index) in dishes" :key="index">
                <div class="caishifenlei2" v-if="el.l3 == '菜式'">
                  {{ el.l1 }}
                </div>
              </div>
            </div>
            <div class="caixifenlei" @click="fn2">*特殊场合</div>
            <!-- 小分类 -->
            <div class="changhe" ref="changhe">
              <div v-for="(el, index) in dishes" :key="index">
                <div v-for="el1 in el" >
                <div class="caishifenlei2" v-if="el1.l3 == '特殊场合'">
                  {{ el1.l1 }}
                </div></div>
              </div>
            </div>
            <div class="caixifenlei" @click="fn3">*特色食品</div>
            <!-- 小分类 -->
            <div class="tese" ref="tese">
              <div v-for="(el, index) in dishes" :key="index">
                <div class="caishifenlei2" v-if="el.l3 == '特色食品'">
                  {{ el.l3 }}
                </div>
              </div>
            </div>
            <div class="caixifenlei" @click="fn4">*功效</div>
            <!-- 小分类 -->
            <div class="gongxiao" ref="gongxiao">
              <div v-for="(el, index) in dishes" :key="index">
                <div class="caishifenlei2" v-if="el.l3 == '功效'">
                  {{ el.l1 }}
                </div>
              </div>
            </div>
            <div class="caixifenlei" @click="fn5">*人群</div>
            <!-- 小分类 -->
            <div class="renqun" ref="renqun">
              <div v-for="(el, index) in dishes" :key="index">
                <div class="caishifenlei2" v-if="el.l3 == '人群'">
                  {{ el.l1 }}
                </div>
              </div>
            </div>
            <div class="caixifenlei" @click="fn6">*视频专访</div>
            <!-- 小分类 -->
            <div class="shiping" ref="shiping">
              <div v-for="(el, index) in dishes" :key="index">
                <div class="caishifenlei2" v-if="el.l3 == '视频专访'">
                  {{ el.l1 }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="fenleicenter">
        <router-view></router-view>
      </div>
    </div>

    <div class="fenleiright">
      <Xiangguan />
    </div>
  </div>
</template>

<script>
import Xiangguan from "./caixixiangguan.vue";
import Lefttop from "./lefttop.vue";
export default {
  data() {
    return {
      dishes: [],
      content: [],
    };
  },
  props: ["zhhid"],
  components: {
    Xiangguan,
    Lefttop,
  },
  async mounted() {
    if (1 <= this.zhhid <= 20) {
      this.$axios("/ly/caishitiaozhuan", { params: this.zhhid }).then((res) => {
        console.log(this.zhhid);
        res.data.map((el) => {
          this.$axios("/ly/lydishes", { params: { type: el.type } }).then(
            (res) => {
              res.data.map((el1) => {
                let l4 = el1.dishes;
                let l2 = el1.content;
                this.dishes.push([{ l3: l4 }, { l1: l2 }]);
              });
            }
          );
        });
      });
    }
    console.log(this.dishes);
  },

  filters: {},
  methods: {
    fn() {
      let caishifenlei1 = this.$refs.caishifenlei1;
      //   console.log(caixifenlei1.style);
      // caixifenlei1.style.display = 'none'
      console.log(11111);
      if (caishifenlei1.style.display == "block") {
        caishifenlei1.style.display = "none";
      } else {
        caishifenlei1.style.display = "block";
      }
    },
    fn2() {
      let changhe = this.$refs.changhe;
      //   console.log(caixifenlei1.style);
      // caixifenlei1.style.display = 'none'
      if (changhe.style.display == "block") {
        changhe.style.display = "none";
      } else {
        changhe.style.display = "block";
      }
    },
    fn3() {
      let tese = this.$refs.tese;
      //   console.log(caixifenlei1.style);
      // caixifenlei1.style.display = 'none'
      if (tese.style.display == "block") {
        tese.style.display = "none";
      } else {
        tese.style.display = "block";
      }
    },
    fn4() {
      let gongxiao = this.$refs.gongxiao;
      //   console.log(caixifenlei1.style);
      // caixifenlei1.style.display = 'none'
      if (gongxiao.style.display == "block") {
        gongxiao.style.display = "none";
      } else {
        gongxiao.style.display = "block";
      }
    },
    fn5() {
      let renqun = this.$refs.renqun;
      //   console.log(caixifenlei1.style);
      // caixifenlei1.style.display = 'none'
      if (renqun.style.display == "block") {
        renqun.style.display = "none";
      } else {
        renqun.style.display = "block";
      }
    },
    fn6() {
      let shiping = this.$refs.shiping;
      //   console.log(caixifenlei1.style);
      // caixifenlei1.style.display = 'none'
      if (shiping.style.display == "block") {
        shiping.style.display = "none";
      } else {
        shiping.style.display = "block";
      }
    },
  },
};
</script>

<style  scoped>
.all {
  display: flex;
  width: 1000px;
  height: 2000px;
}
.leftall {
  /* margin-left: 20px; */
  height: 2000px;
  width: 66.667%;
  display: flex;
}
.LeftA {
  height: 800px;
  width: 25%;
}
.leftdown {
  height: 300px;
  margin-top: 100px;
}
.lettopa {
  width: 100%;
  text-decoration: none;
  display: inline-block;
  margin: 7.5px auto;
  color: black;
}
.lettopa:hover {
  color: rgb(231, 22, 22);
}
.fenleicenter {
  margin: 0 auto;
  height: 2000px;
  width: 75%;
  /* overflow: hidden; */
}

.fenleiright {
  width: 33.3333%;
  height: 2000px;
  /* background-color: blueviolet; */
}

/* caixileftdown */
.caixi {
  border-bottom: 1px solid rgb(243, 243, 243);
}
.caixifenlei {
  color: rgb(144, 144, 144);
  /* background-color: rosybrown; */
  height: 40px;
  width: 150px;
  line-height: 40px;
  border-top: 1px solid rgb(243, 243, 243);
  cursor: pointer;
}
.caishifenlei1,
.changhe,
.tese,
.gongxiao,
.renqun,
.shiping {
  display: none;
}

.caixifenlei:hover {
  background-color: rgb(233, 230, 230);
  color: rgb(70, 70, 70);
}
.caishifenlei2 {
  margin-left: 20px;
  height: 30px;
  line-height: 30px;
  color: rgb(144, 144, 144);
  font-size: 15px;
  cursor: pointer;
}
.caishifenlei2:hover {
  color: rgb(223, 55, 55);
}
</style>